<template>
    <div class="loginbox">

    <!-- 用户名 -->
    <van-form @submit="onSubmit" @failed="onFail">
      <van-field
        autocomplete="off"
        v-model="form.username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        left-icon="user-o"
        clearable
        :rules="[{ required: true, message: '请输入用户名' }]"
      />

      <!-- 密码 -->
      <van-field
        autocomplete="off"
        v-model="form.password"
        :type="type"
        name="password"
        label="密码"
        left-icon="shield-o"
        :right-icon="type == 'password' ? 'closed-eye' : 'eye-o'"
        @click-right-icon="changeType"
        placeholder="请输入密码"
        clearable
        :rules="[
        { required: true, message: '请输入密码' },
        { pattern: reg.pwd, message: '用户名或密码错误!'}
        ]"
      />

      <!-- class="jcsb"样式在   styles/mobile.scss -->
      <div style="margin: 16px; display: flex" class="jcsb">
        <p>
          <router-link :to="{name:'register'}" class="link1 mb10">还未注册,去注册?</router-link>
        </p>
        <p>
          <router-link :to="{name:'forgetpassword'}" class="link1 mb10">忘记密码?</router-link>
        </p>
      </div>

      <!-- 登录 -->
      <div style="margin: 16px;">
        <van-button  block type="primary" native-type="submit">登录</van-button>
      </div>

      <!-- 重置数据 prevent阻止浏览器默认事件-->
      <div style="margin: 16px;">
        <van-button  block type="danger" @click.stop.prevent ="resetdata">重置数据</van-button>
      </div>

    </van-form>
    </div>
</template>

<script>
export default {
  data() {
      return {
          form: {},
          type: 'password'
      }
  },
  mounted() {
    // 获取注册成功传过来的用户名 
    // if(this.$route.query.username){
    //   this.form = { username: this.$route.query.username }
    // } else {
    //   this.form = {
    //     username:localStorage.getItem('this_username')
    //   }
    // }
    this.form = {
      username: this.$route.query.username ? this.$route.query.username : localStorage.getItem('this_username')
    }
  },
  methods: {
      async onSubmit(value){ // 登录 get
        console.log(value)

        let res = await this.$ajax.findUser(value)
        if(res.length>0){
          // 登录成功
          this.showSuccessMsg('登录成功!')
          // this.$router.push({ name: 'mine' })
          // if(this.$route.to)
          // 注册 
          // 修改密码
          // 忘记密码 
          // mine 
          if(localStorage.getItem('fromwhere') == 'mine'){
            this.$router.push({ name: 'mine' })
          } else {
            this.$router.go(-1);
          }
          //  登录成功就存储userInfo
          this.changeUserInfo(res[0])
          localStorage.setItem('this_username', value.username)
        } else {
          // 登录失败 
          this.showErrorMsg("用户名或密码错误!")
        }
      },
      onFail(){
        this.$toast.fail("请输入有效的登录信息!")
      },
      resetdata(){ // 重置数据
        this.form = {}
      },
      changeType() {
          this.type = this.type == 'password' ? 'type' : 'password'
      }
  }
}
</script>

<style lang="scss" scoped>

</style>